<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">创建小组</block>
		</cu-custom>	
		<view class="margin-top">
			<view class="cl-divider">
				<view class=" bg-gradual-red" ></view>
				<view class="cl-divider__text">
					<view class="Title">小组封面</view>
				</view>
			</view>	
			<view class="paddingInput justify-center" style="padding: 20upx 150upx;">
				<view class="grid col-2 grid-square flex-sub justify-center bg-gray">
					<view :style="{'background-image':`url(${$ComFunJS.ImgFile(form.cover)})`}" @click="choose" class="firImg" v-if="form.cover"></view>
					<view class="solids" @click="choose" v-else>
						<text class='cuIcon-cameraadd'></text>
					</view>
					
				</view>
			</view>
		</view>				
		<view class="margin-top">
			<view class="cl-divider">
				<view class=" bg-gradual-red" ></view>
				<view class="cl-divider__text">
					<view class="Title">小组名称</view>
				</view>
			</view>	
			<view class="paddingInput justify-center">
				<view class="inputBox bg-white flex align-center solid-bottom">
					<input type="text" v-model="form.name" class="text-center" placeholder="你想创建什么类型的小组" />
				</view>
			</view>
		</view>
		<view class="margin-top">
			<view class="cl-divider">
				<view class=" bg-gradual-red" ></view>
				<view class="cl-divider__text">
					<view class="Title">小组描述</view>
				</view>
			</view>	
			<view class="paddingInput justify-center">
				<view class="inputBox bg-white flex align-center  solid-bottom">
					<input type="text" v-model="form.channel" class="text-center" placeholder="一句话说清你的小组特色" />
				</view>
			</view>
		</view>		
		<view class="margin-top">
			<view class="cl-divider">
				<view class=" bg-gradual-red" ></view>
				<view class="cl-divider__text">
					<view class="Title">小组地点</view>
				</view>
			</view>	
			<view class="paddingInput justify-center">
				<view class="inputBox bg-white flex align-center  solid-bottom">
					<input type="text"  v-model="form.place" class="text-center" placeholder="特色地点,吸引特别的人(选填)" />
				</view>
			</view>
		</view>		
		<view class="margin-top">
			<view class="cl-divider">
				<view class=" bg-gradual-red" ></view>
				<view class="cl-divider__text">
					<view class="Title">小组类型</view>
				</view>
			</view>	
			<view class="paddingInput justify-center">
				<view class="inputBox bg-white flex align-center justify-between">
					<view class="radioBox flex justify-center align-center" @click="changeType(1)">
						<view class="ico" :class="form.gtype==1?'cuIcon-roundcheckfill change':'cuIcon-round'" ></view>
						<view class="text">免费</view>
					</view>
					<view class="radioBox flex justify-center align-center" @click="changeType(2)">
						<view class="ico " :class="form.gtype==2?'cuIcon-roundcheckfill change':'cuIcon-round'"></view>
						<view class="text">收费</view>
					</view>					
				</view>
			</view>
		</view>	
		<view class="margin-top" v-if="form.gtype==2">
			<view class="cl-divider">
				<view class="bg-gradual-red" ></view>
				<view class="cl-divider__text">
					<view class="Title">小组费用</view>
				</view>
			</view>	
			<view class="paddingInput justify-center">
				<view class="inputBox bg-white flex align-center  solid-bottom">
					<input type="number" v-model="form.price" class="text-center" placeholder="设定小组费用"/>
				</view>
			</view>
		</view>		
		<view class="flex justify-center margin-top padding-bottom" @click="sumBit">
			<button class="add-btn">提交</button>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				form:{
					cover:"",
					name:"",
					channel:"",
					place:"",
					gtype:1,
					price:""
				}
			};
		},
		onLoad(){
			
		},
		onShow() {
			
		},
		methods: {
			sumBit(){
				let data = {...this.form}
				if(!data.cover){
					this.$api.msg('封面不能为空');
					return
				}
				if(!data.name){
					this.$api.msg('小组名称不能为空');
					return
				}
				if(!data.place){
					this.$api.msg('地点不能为空');
					return
				}
				if(!data.price&&data.gtype==2){
					this.$api.msg('价格不能为空');
					return
				}
				this.$ComFunJS.ajax({
					url:'/addons/cms/api/groupadd',
					method: 'post',
					data:{
						...data
					},
					success: (res) => {
						if (res.code==1) {
							this.$api.msg('添加成功');
							uni.navigateBack({ delta: 1 });
						} else {
							this.$api.msg(res.data.error);
							
						}
					}
				})				
			},
			// 封面图片上传
			choose(){
				let chooseImg = this.$ComFunJS.ChooseImage(1);
				chooseImg.then((res)=>{
					console.log(res)
					if(res.length){
						this.form.cover=res[0]					
					}
				})
			},		
			navTo(url){
				uni.navigateTo({
					url: url
				})
			},
			changeType(value){
				this.form.gtype = value
			}
		},

	}
</script>

<style  lang="scss">
	page{
		background: #fff;
		height: 100%;
	}
	.Title{
		font-family:PingFang;
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
	}
	.firImg{
		width: 394upx!important;
		height: 200upx!important;
		margin: 0 !important;
		background-repeat: no-repeat;
		background-position:center center;
		background-size: cover;		
		object-fit: cover;
	}
	.paddingInput{
		padding: 15upx 60upx;
		border-radius: 8upx;
		.inputBox{
			width: 100%;
			height: 80upx;
			color: #333333;
			padding: 0 20upx;
			input{
				width: 100%;
			}
			.radioBox{
				width: 50%;
				.ico{
					font-size:30upx;
					margin-right: 10upx;
					color: #8799A3;
					&.change{
						color: #D5727A;
					}
				}
			}
		}
	}
	.cl-divider {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		width: 100%;
		position: relative;
		text-align: center;
		box-sizing: border-box;
		&__line {
			position: absolute;
			height: 1upx;
			top: 50%;
			width: 80%;
			left: 50%;
			transform: scaleY(0.5) translateX(-50%) translateZ(0);
		}
		&__text {
			position: absolute;
			left: 50%;
			padding: 0 30upx;
			background: #FFFFFF;
			color: #303133;
			font-size: 26upx;
			transform: translateX(-50%);
		}
	}
</style>
